<template>
  <!-- 试题预览对话框 -->
  <div class="container">
    <el-dialog
      title="题目预览"
      :visible="dialogFormVisible"
      width="50%"
      @close="closeOpen"
    >
      <span slot="footer" class="dialog-footer">
        <div class="form">
          <el-descriptions :column="4">
            <el-descriptions-item label="【题型】">{{
              form.questionType
            }}</el-descriptions-item>
            <el-descriptions-item label="【编号】">{{
              form.id
            }}</el-descriptions-item>
            <el-descriptions-item label="【难度】">{{
              form.difficulty
            }}</el-descriptions-item>
            <el-descriptions-item label="【标签】">{{
              form.tags
            }}</el-descriptions-item>
            <el-descriptions-item label="【学科】">{{
              form.subjectName
            }}</el-descriptions-item>
            <el-descriptions-item label="【目录】">{{
              form.directoryName
            }}</el-descriptions-item>
            <el-descriptions-item label="【方向】">{{
              form.direction
            }}</el-descriptions-item>
          </el-descriptions>
          <hr />
          <el-descriptions :column="1">
            <el-descriptions-item label="【题干】">{{
              form.question
            }}</el-descriptions-item>
            <el-descriptions-item label="选项"
              >（以下选中的选项为正确答案）</el-descriptions-item
            >
          </el-descriptions>
          <hr />
          <el-descriptions :column="1">
            <el-descriptions-item label="【参考答案】">
              <el-tag size="medium" type="danger" effect="dark"
                >视频答案预览</el-tag
              >
            </el-descriptions-item>
          </el-descriptions>
          <div class="video-container">
            <video src="" controls></video>
          </div>

          <hr />

          <el-descriptions :column="1">
            <el-descriptions-item label="【参考答案】">{{
              form.answer
            }}</el-descriptions-item>
          </el-descriptions>

          <hr />
          <el-descriptions :column="1">
            <el-descriptions-item label="【题目备注】">{{
              form.remarks
            }}</el-descriptions-item>
          </el-descriptions>

          <div class="button">
            <el-button type="primary" @click="closeOpen">关闭</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  name: 'Preview',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      form: {}
    }
  },
  methods: {
    // 获取数据
    async getDepartmentInfo (id) {
      console.log(id)
      const { data } = await detail(id)
      // console.log(data)

      this.form = { ...data }
      console.log(this.form)
    },
    // 关闭弹窗
    closeOpen () {
      // 重置表单
      // this.$refs.form.resetFields()

      this.$emit('update:dialogFormVisible', false)
    }
  }
}
</script>

<style scoped lang="less">
.button {
  padding: 10px 0 20px 20px;
  text-align: right;
}
</style>
